<template>
  <div class="con">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="dangqian">提交订单</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="nei">
        <div class="title">
          <div>确认收货地址</div>
          <div class="a" @click="todizhi">管理收货地址</div>
        </div>
        <div class="dizi">
          <template v-if="addresslist.length > 0">
            <el-radio-group v-model="radio">
              <el-radio
                class="item1"
                v-for="(e, i) in addresslist"
                :key="i"
                :label="i"
                @change="changeOpen"
                :class="{ item2: i == radio }"
              >
                <img
                  src="@/assets/img/ditu.png"
                  :class="{ op: e.defaultValue == 1 }"
                  class="img2"
                />
                <div class="right18">{{ e.fullName }}</div>
                <div class="right18">{{ e.phone }}</div>
                <div class="right18">
                  <span>{{ e.province }}</span>
                  <span>{{ e.city }}</span>
                  <span>{{ e.county }}</span>
                  <span>{{ e.address }}</span>
                </div>
                <div class="color" @click.stop="shezi(e.id)">可修改地址</div>
                <div
                  class="zui"
                  v-show="e.defaultValue == 1"
                  @click.stop="st(e.id)"
                >
                  设置默认收货地址
                </div>
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else>
            <div class="a">你还没有收货地址！</div>
          </template>
        </div>
        <div class="xinxi">订单信息</div>
        <div class="biao">
          <el-table
            :data="tableData"
            @cell-click="cellclick"
            style="width: 100%"
          >
            <el-table-column prop="img" label="商品信息" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.img" class="sangpin" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" align="center">
            </el-table-column>
            <el-table-column prop="guige" label="规格" align="center">
            </el-table-column>
            <el-table-column prop="name2" label="店铺名称" align="center">
            </el-table-column>
            <el-table-column prop="sum" label="数量" align="center">
            </el-table-column>
            <el-table-column prop="danjia" label="单价" align="center">
            </el-table-column>
            <el-table-column prop="xiaoji" label="小计" align="center">
            </el-table-column>
          </el-table>
          <div class="ji">
            <div class="left">
              <div class="liu">给卖家留言：</div>
              <el-input
                type="textarea"
                :rows="5"
                placeholder="选填,请先和商家协商一致"
                v-model="textarea"
              >
              </el-input>
            </div>
            <div class="right">
              <el-row>
                <el-col :span="8">
                  <div>优惠：</div>
                </el-col>
                <el-col :span="8" :offset="8">
                  <div class="c">
                    <el-select
                      v-model="value"
                      @change="select(value)"
                      placeholder="请选择优惠卷"
                    >
                      <el-option
                        v-for="item in cities"
                        :key="item.id"
                        :label="item.money"
                        :value="item.id"
                      >
                        <span style="float: left"
                          >满{{ item.coupon_money }}</span
                        >
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >减{{ item.money }}</span
                        >
                      </el-option>
                    </el-select>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div>快递费：</div>
                </el-col>
                <el-col :span="8" :offset="8">
                  <div class="c">￥{{ postMoney }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div>运费险：</div>
                </el-col>
                <el-col :span="8" class="a">
                  <div>
                    <el-checkbox v-model="checked"
                      >退换货可赔付10元</el-checkbox
                    >
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="c">￥{{ costMoney }}</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="xuanzhe">
          <div class="zifu1">支付方式</div>
          <el-radio-group v-model="xuanzhe">
            <el-radio :label="0">
              <img :src="weixin" alt="" class="img" />
              <span>微信支付</span>
            </el-radio>
            <!-- <el-radio :label="1">
              <img :src="zifubao"
                   alt=""
                   class="img">
              <span>支付宝支付</span> -->
          </el-radio-group>
        </div>
        <div class="zifu" v-if="addresslist[radio]">
          <div class="one">
            实付：<span>￥{{ sum }}</span>
          </div>
          <div class="two">
            邮寄至：<span>{{ addresslist[radio].province }}</span>
            <span>{{ addresslist[radio].city }}</span>
            <span>{{ addresslist[radio].county }}</span>
            <span>{{ addresslist[radio].address }}</span>
          </div>
          <div class="two">
            <span>收货人：{{ addresslist[radio].fullName }}</span
            ><span>{{ addresslist[radio].phone }}</span>
          </div>
        </div>
        <div class="di">
          <div class="one" @click="tocart">
            <img src="@/assets/img/fanhui.png" alt="" />
            <span>返回购物车</span>
          </div>
          <div class="two a" @click="zhifu(0)">自付订单</div>
          <div class="two b" v-if="level == 1" @click="zhifu(5)">审批订单</div>
        </div>
      </div>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="100px" class="form1">
        <el-form-item label="选择城市" :required="true">
          <el-cascader
            placeholder="请选择地区"
            :options="options"
            v-model="form.provinceCityArea"
            @change="changeCity"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :required="true">
          <el-input
            v-model="form.address"
            placeholder="请输入详细地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :required="true">
          <el-input
            v-model="form.fullName"
            placeholder="请输入收件人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" :required="true">
          <el-input
            v-model="form.phone"
            placeholder="请输入收件人手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否默认">
          <el-radio-group v-model="form.defaultValue" @change="alog">
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleSubmit">取 消</el-button>
        <el-button type="primary" @click="adsSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import arr from "@/assets/js/districts";
export default {
  name: "",
  data() {
    return {
      addresslist: [],
      radio: 0,
      radio1: 0,
      xuanzhe: 0, //0微信 1支付宝
      weixin: require("@/assets/img/weixin.png"),
      zifubao: require("@/assets/img/zifubao.png"),
      dialogFormVisible: false,
      form: {
        provinceCityArea: [],
        xing: "",
        province: "河南省",
        city: "郑州市",
        area: "中原区",
        name: "",
        iop: "",
        defaultValue: 0
      },
      options: [], // 省市区
      selectedOptions: [],
      cityArr: [], // 城市列表
      areaArr: [], // 区县列表
      tableData: [],
      textarea: "",
      checked: false,
      address: [], //收货地址列表
      postMoney: 0, //邮费
      costMoney: 0, //运费险
      money: 0, //商品单价
      value: 0, //显示选择优惠卷的价格
      valueid: "", //选中的优惠卷id
      cities: [],
      level: 0,
      baseUrl: ""
    };
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.isinput();
    this.initDistPicker();
    this.addressList();
    this.route();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.baseUrl = this.$baseUrl;
  },
  //计算属性
  computed: {
    sum() {
      var a = this.postMoney ? this.postMoney : 0;
      var b = this.money ? this.money : 0;
      var c = this.checked ? this.costMoney : 0;
      var d = this.value;

      console.log(a);
      console.log(b);
      console.log(c);
      console.log(d);

      var sum1 = a + b + c - d;
      let sum = sum1.toFixed(2);
      return sum;
      // return (
      //   this.postMoney + this.money + (this.checked ? this.costMoney : 0) - this.value
      // );
    }
  },
  //方法
  methods: {
    select(value) {
      // console.log(value);
      let obj = {};
      obj = this.cities.find(project => {
        return project.id === value;
      });
      this.value = obj.money;
      this.valueid = obj.id;
    },
    // 获取能使用的优惠卷列表
    async youhui() {
      let res = await this.$postRequest(
        "/api/memberCoupon/getMyCanCouponList",
        {
          userId: localStorage.getItem("userId"),
          payment: this.money,
          pageNumber: 1,
          pageSize: 100
        }
      );
      console.log(res);
      this.cities = res.data.list;
    },
    async zhifu(e) {
      if (this.addresslist.length == 0) {
        this.$message.error("去添加地址");
        this.todizhi();
      } else {
        if (this.$route.query.sty == 1) {
          //从商品详情进入
          let da = {
            userId: localStorage.getItem("userId"), //用户id
            buyerMsg: this.textarea, //留言
            postFee: this.postMoney, //邮费
            addressId: this.addresslist[this.radio].id, //地址id
            type: e, //支付，5审核
            id: this.$route.query.goodsId, //商品id
            productId: this.$route.query.productId, //商品id
            total: this.$route.query.total, //商品数量
            couponId: this.valueid //优惠卷id
          };
          console.log("data", da);
          let res = await this.$postRequest("/api/order/addGoodsOrder", da);
          console.log(res);
          if (e == 5 && res.code == 0) {
            this.$message.success("审批已提交");
            this.$router.push({ name: "approval" });
          } else if (e == 0 && res.code == 0) {
            if (this.xuanzhe == 0) {
              console.log(res);
              // 微信支付
              this.$router.push({
                path: "/pay",
                query: { price: res.data.allPrice, payNum: res.data.payNum }
              });
            } else {
              let url = `${this.$baseUrl}/api/ali/toPay.html?price=${res.data.allPrice}&payNum=${res.data.payNum}`;
              console.log("url", url);
              window.open(url);
            }
          }
        } else {
          let da = {
            userId: localStorage.getItem("userId"), //用户id
            cartList: this.$route.query.cartList,
            buyerMsg: this.textarea, //留言
            postFee: this.postMoney, //邮费
            addressId: this.addresslist[this.radio].id, //地址id
            type: e, //支付，5审核
            id: this.$route.query.goodsId, //商品id
            productId: this.$route.query.productId, //商品id
            couponId: this.valueid //优惠卷id
          };
          let res = await this.$postRequest("/api/order/addCartOrder", da);
          this.getCountCart();
          console.log(res);
          if (e == 5 && res.code == 0) {
            this.$message.success("审批已提交");
          } else if (e == 0 && res.code == 0) {
            if (this.xuanzhe == 0) {
              // 微信支付
              this.$router.push({
                path: "/pay",
                query: { price: res.data.allPrice, payNum: res.data.payNum }
              });
              // window.open(Detail.href, "_blank");
              // let url = `${this.$baseUrl}/api/wx/toPay.html?price=${res.data.allPrice}&payNum=${res.data.payNum}`;
              // window.open(url);
            } else {
              let url = `${this.$baseUrl}/api/ali/toPay.html?price=${res.data.allPrice}&payNum=${res.data.payNum}`;
              window.open(url);
            }
          }
        }
      }
    },
    // 查询购物车数量
    async getCountCart() {
      let res = await this.$postRequest("/api/memberCart/getCountCart", {
        userId: localStorage.getItem("userId")
      });
      console.log(res);
      if (res.code == 0) {
        this.$store.commit("setcart", res.data);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 获取上个页面传来的内容
    async route() {
      if (localStorage.getItem("userId")) {
        console.log("route", this.$route.query);
        let data = this.$route.query;
        if (data.sty == 1) {
          //从商品详情跳来的
          let da = { ...data };
          delete da.sty;
          let res = await this.$postRequest("/api/order/confirmGoodsOrder", da);
          if (res.flag == 0) {
            (this.form1 = {
              name: "",
              website: "",
              address: "",
              imgUrl: ""
            }),
              this.$message.error(res.msg);
            this.$router.push({ name: "yindex" });
          } else {
            let obj = {
              img: res.data.goodsImg,
              name: res.data.goodsName,
              guige: res.data.spec,
              name2: res.data.shopName,
              sum: res.data.total,
              danjia: res.data.price,
              xiaoji: res.data.allPrice,
              goodsid: res.data.goodsId
            };
            this.tableData.push(obj);
            this.postMoney = res.data.postMoney;
            this.costMoney = res.data.costMoney;
            this.money = res.data.allPrice;
            this.level = res.level;
            this.youhui();
          }
        } else {
          let da = { ...data };
          delete da.sty;
          let res = await this.$postRequest("/api/order/confirmCartOrder", da);
          let li = [];
          res.data.forEach(res => {
            let obj = {
              img: res.goodsImg,
              name: res.name,
              guige: res.spec,
              name2: res.shopName,
              sum: res.total,
              danjia: res.price,
              xiaoji: res.allPrice,
              goodsid: res.goodsId
            };
            this.tableData.push(obj);
            this.postMoney += res.postMoney;
            this.costMoney += res.costMoney;
            this.money += res.allPrice;
          });
          this.level = res.level;
          this.youhui();
        }
      } else {
        this.$router.push({ name: "loginindex" });
      }
    },
    isinput() {
      this.$store.commit("setDValue", true);
    },
    changeOpen(a) {
      this.radio = a;
    },
    // 跳转商品详情
    cellclick(a) {
      let Detail = this.$router.resolve({
        path: "/home/detail",
        query: {
          id: a.goodsid
        }
      });
      window.open(Detail.href, "_blank");
    },
    tocart() {
      this.$router.push({
        path: "/home/conindex/cart"
      });
    },
    // 设置默认地址
    async st(i) {
      let res = await this.$postRequest("/api/member/address/default", {
        userId: localStorage.getItem("userId"),
        addressId: i
      });
      this.$message.success("设置成功");
      this.addressList();
    },
    async shezi(i) {
      let res = await this.$postRequest("/api/member/address/getById", {
        userId: localStorage.getItem("userId"),
        addressId: i
      });
      console.log(res);
      this.ifCity(res.data);
    },
    // 判断是否有城市(有的话转码)
    ifCity(row) {
      let form = {
        provinceCityArea: [],
        address: row.address,
        province: "",
        city: "",
        county: "",
        fullName: row.fullName,
        phone: row.phone,
        defaultValue: row.defaultValue + ""
      };
      this.options.map((item, index) => {
        if (item.label == row.province) {
          this.cityArr = item.children; //存储城市列表
          form.provinceCityArea[0] = item.value;
          form.province = row.province;
        }
      });
      //获取市名
      this.cityArr.map((item, index) => {
        if (item.label == row.city) {
          this.areaArr = item.children; //存储区县列表
          form.provinceCityArea[1] = item.value;
          form.city = row.city;
        }
      });
      //获取区县名
      this.areaArr.map((item, index) => {
        if (item.label == row.county) {
          form.provinceCityArea[2] = item.value;
          form.county = row.county;
        }
      });
      console.log(form, row);
      this.form = form;
      this.dialogFormVisible = true;
    },
    // 初始化选择器
    initDistPicker() {
      let distData = arr.arr;
      let options = []; // 省
      for (var provinceKy in distData["100000"]) {
        let optProvinceItem = {
          value: provinceKy,
          label: distData["100000"][provinceKy]
        };
        if (distData[provinceKy]) {
          // 市
          for (var cityKy in distData[provinceKy]) {
            optProvinceItem.children = optProvinceItem.children
              ? optProvinceItem.children
              : [];
            let optCityItem = {
              value: cityKy,
              label: distData[provinceKy][cityKy]
            };
            if (distData[cityKy]) {
              // 区
              for (var areaKy in distData[cityKy]) {
                optCityItem.children = optCityItem.children
                  ? optCityItem.children
                  : [];
                let optAreaItem = {
                  value: areaKy,
                  label: distData[cityKy][areaKy]
                };
                optCityItem.children.push(optAreaItem);
              }
            }
            optProvinceItem.children.push(optCityItem);
          }
        }
        options.push(optProvinceItem);
      }
      this.distData = distData;
      this.options = options;
    }, // 切换城市
    changeCity(value) {
      this.options.map((item, index) => {
        if (item.value == value[0]) {
          console.log(item);
          this.cityArr = item.children; //存储城市列表
          this.form.province = item.label;
        }
      }); //获取市名
      this.cityArr.map((item, index) => {
        if (item.value == value[1]) {
          console.log(item);
          this.areaArr = item.children; //存储区县列表
          this.form.city = item.label;
        }
      }); //获取区县名
      this.areaArr.map((item, index) => {
        if (item.value == value[2]) {
          console.log(item);
          this.form.area = item.label;
        }
      });
    },
    // 获取收货地址列表
    async addressList() {
      let res = await this.$postRequest("/api/member/address/list", {
        userId: localStorage.getItem("userId")
      });
      res.data.forEach((res, i) => {
        console.log("i", res.defaultValue);
        if (res.defaultValue == 0) {
          this.radio = i;
        }
      });

      this.addresslist = res.data;
    },
    // 跳转地址管理
    todizhi() {
      this.$router.push({ name: "address" });
    },
    alog(e) {
      this.$forceUpdate();
    },
    // 取消
    cancleSubmit() {
      this.dialogFormVisible = false;
    },
    // 清空表单
    restForm() {
      this.form = {
        provinceCityArea: "",
        address: "",
        province: "",
        city: "",
        county: "",
        fullName: "",
        phone: "",
        default: "1"
      };
    },
    // 提交地址按钮
    adsSubmit() {
      var value = this.form;
      var phoneReg = /^1[0-9]{10}$/;
      if (
        value.provinceCityArea.length < 3 ||
        value.address == "" ||
        value.fullName == "" ||
        value.phone == ""
      ) {
        this.$message.error("请将信息补充完整");
      } else if (!phoneReg.test(value.phone)) {
        this.$message.error("手机号有误，请确认后重新提交");
      } else {
        var adsId = this.form.id;
        this.editAds(adsId);
      }
    },
    // 修改地址
    editAds(id) {
      const that = this;
      console.log(this.form);
      this.$postRequest("/api/member/address/change", {
        userId: localStorage.getItem("userId"),
        province: this.form.province,
        city: this.form.city,
        county: this.form.county,
        address: this.form.address,
        fullName: this.form.fullName,
        phone: this.form.phone,
        default: this.form.defaultValue,
        addressId: id
      }).then(res => {
        that.$message.success("修改成功");
        that.dialogFormVisible = false;
        that.restForm();
        that.getAdsList();
      });
    },
    // 文件上传前的钩子，数为上传的文件
    beforeUpload(file) {
      // 判断图片是否大于2M
      const isLt2M = file.size / 1024 / 1024 < 2;
      // const fileType = file.name.substring(file.name.lastIndexOf('.')+1)
      // 判断图片的类型
      const isJpg =
        file.type == "image/jpeg" ||
        file.type == "image/jpg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      if (!isJpg) {
        this.$message.error("只能上传jpg, jpeg, png, gif格式的图片！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
    },
    // 上传图片超出数量限制时的钩子
    exceed(files, fileList) {
      this.$message.error("最多上传1张图片哦！");
    },
    // 上传成功时的钩子
    uploadSuccess(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.form1.imgUrl = res.data;
    }
  }
};
</script>
<style scoped lang="scss">
.con {
  background-color: #f9f9f9;
  & > div {
    width: 1400px;
    margin: auto;
    /deep/ .el-breadcrumb {
      height: 48px;
      font-size: 14px;
      line-height: 48px;
      .el-breadcrumb__inner {
        color: #999;
        font-weight: 500;
      }
      .dangqian .el-breadcrumb__inner {
        color: #1a69e0;
      }
    }
    /deep/ .el-select,
    /deep/ .el-cascader {
      width: 100%;
    }
    .nei {
      width: 100%;
      background: #ffffff;
      border: 1px solid #eeeeee;
      margin-bottom: 30px;
      .title {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eeeeee;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        div {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
        }
        .a {
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
        }
      }
      .dizi {
        width: 100%;
        padding: 20px;
        .item1 {
          width: 100%;
          height: 50px;
          background: #f9f9f9;
          border: 1px solid #eeeeee;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          padding: 0 20px 0 10px;
          box-sizing: border-box;
          position: relative;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          position: relative;
          &.item2 {
            border: 1px solid #df3331;
            background: rgba(223, 51, 49, 0.05);
          }
          .img2 {
            margin-right: 42px;
          }
          .op {
            opacity: 0;
          }
          .right18 {
            margin-right: 18px;
            span {
              margin-right: 4px;
            }
          }
          .zui {
            position: absolute;
            right: 20px;
            // text-align: right;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
          }
          .color {
            cursor: pointer;
            color: #1a69e0;
            height: 40px;
            line-height: 40px;
          }
        }
        /deep/ .el-radio-group {
          width: 100%;
          .el-radio__input {
            position: absolute;
            left: 55px;
          }
          .el-radio__label {
            display: flex;
            align-items: center;
            width: 100%;
          }
          .el-radio__input.is-checked + .el-radio__label {
            color: #000000;
          }
        }
      }
      .xinxi {
        width: 100%;
        padding: 0px 20px 20px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }
      .biao {
        width: 1360px;
        margin: 0 auto 20px;
        border: 1px solid #eeeeee;
        .sangpin {
          width: 70px;
          height: 70px;
        }

        .ji {
          width: 100%;
          height: 150px;
          background: #ffffff;
          display: flex;
          justify-content: space-between;
          padding: 20px;
          .left {
            width: 40%;
            display: flex;

            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
            .liu {
              width: 122px;
            }
          }
          .right {
            width: 40%;
            text-align: right;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
            .a {
              text-align: left;
            }
            .c {
              font-weight: bold;
              color: #de3232;
            }
            .el-row {
              margin-bottom: 20px;
            }
            /deep/ .el-checkbox__label {
              font-size: 16px;
              color: #000000;
            }
          }
        }
      }
      .xuanzhe {
        margin: auto;
        width: 1360px;
        height: 60px;
        background: rgba(222, 50, 50, 0.05);
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        display: flex;
        align-items: center;
        padding: 0 20px;
        .zifu1 {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          margin-right: 50px;
        }
        /deep/ .el-radio-group {
          flex: 1;
          display: flex;
          align-items: center;
          .el-radio {
            display: flex;
            align-items: center;
            .el-radio__label {
              display: flex;
              align-items: center;
            }
          }
        }
        .img {
          width: 28px;
          height: 28px;
          margin-right: 5px;
        }
      }
      .zifu {
        width: 1360px;
        height: 150px;
        margin: 20px auto;
        background: rgba(242, 73, 33, 0.05);
        border: 1px solid #f24921;
        text-align: right;
        padding: 20px 40px;
        .one {
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #010101;
          margin-bottom: 18px;
          span {
            color: #df3331;
            font-size: 32px;
          }
        }
        .two {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          margin-bottom: 20px;
          span {
            margin-right: 4px;
          }
        }
      }
      .di {
        width: 1360px;
        height: 60px;
        margin: 20px auto;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 80px;
        & > div {
          margin-left: 20px;
        }
        .one {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #1a69e0;
          cursor: pointer;
          img {
            width: 17px;
            height: 17px;
            margin-right: 4px;
          }
        }
        .two {
          width: 200px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          cursor: pointer;
        }
        .a {
          background: #de3232;
        }
        .b {
          background: #1a69e0;
        }
      }
    }
    .addimg {
      width: 148px;
      height: 148px;
      border-radius: 6px;
    }
    .b /deep/ .el-upload--picture-card {
      background-color: #fbfdff;
      border-radius: 6px;
      box-sizing: border-box;
      width: 148px;
      height: 148px;
      border: none;
    }
  }
}
</style>
